import React, { Component } from 'react'
import Page from './../../components/common/Page'
import Empty from './../../components/common/Empty'
import api from './../../serve/api'
import styles from './SearchResult.module.scss'
import placeholder from './../../images/placeholder.jpg'
import {withRouter} from "react-router-dom"

class SearchResult extends Component {

  constructor(props) {
    super(props)
    this.state = {
      pageTotal: '',
      pageSize: 10,
      page: 1,
      result: [],
      searchKey: ''
    }
  }

  componentDidMount() {
    const { match } = this.props
    const searchKey = match.params.searchKey
    this.getSearchResult(searchKey, this.state.page)
  }

  async getSearchResult(searchKey, page) {
    const { code, result, resultNum } = await api.listArticleApi({ page, pageSize: this.state.pageSize, searchKey })
    if (code !== '000000') {
      return
    }
    this.setState({
      page,
      result,
      searchKey,
      pageTotal: resultNum
    })
  }

  getCurrentPage(currentPage) {
    this.getSearchResult(this.state.searchKey, currentPage)
  }

  onItem(item) {
    this.props.history.push(`/mainPage/commonDetail/article/${item.id}`)
  }
  
  render() {
    const { result, pageTotal } = this.state
    return (
      <div className={styles.search_result_container}>
        <div className={styles.position}>
          您当前位置：首页><span style={{ color: '#e5371f' }}>搜索结果</span>
        </div>
        <div className={styles.search_result}>
          {result.length > 0 &&
          <div className={styles.result_list}>
            {result.map((item, index) => {
              return (
                <div key={index} className={styles.list_item} onClick={() => this.onItem(item) }>
                  <img src={item.img || placeholder} alt=""/>
                  <div className={styles.item_content}>
                    <h3 dangerouslySetInnerHTML={{__html: item.title}}>
                    </h3>
                    <span className={styles.span_con} dangerouslySetInnerHTML={{__html: item.content}}>
                    </span>
                    <div className={styles.sub}>
                      作者：{item.author}
                    </div>
                  </div>
                </div>
              )
            })}
          </div>}
          {result.length === 0 && <Empty title="暂无数据" />}
          {/* {result.length > 0 && <Page 
            pageConfig={{totalPage: pageTotal, pageSize: this.state.pageSize, currentPage: this.state.page }}
            pageCallbackFn={currentPage => this.getCurrentPage(currentPage)}
          />} */}
        </div>
      </div>
    )
  }
}

export default withRouter(SearchResult)